<template>
  <el-drawer
      title="富文本"
      :with-header="false"
      :visible.sync="visible"
      :direction="direction"
      :before-close="()=>handleClose()"
      custom-class="layer_wrap form_edit_drawer"
  >
    <div class="layer_inside">
      <div class="layer_header">
        <span class="title">富文本</span>
      </div>
      <div class="layer_main_wrap">
        <!--富文本-->
        <Editor v-model="content" :min-height="460" @on-change="backContent"/>
      </div>
      <!--按钮-->
      <div class="footer-area">
        <el-button
            class="button_item cancel"
            @click="()=>handleClose()"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            class="button_item sure"
            @click="()=>handleSure()">
          确认
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'UpdateFormEditor',

  props: ["visible", 'info'],

  components: {},

  data() {
    return {
      direction: 'rtl',
      content: null,
      tempContent: null,
    }
  },

  async mounted() {},

  methods: {
    // 接收回传的内容
    backContent(val) {
      let {html} = val;
      this.tempContent = html
    },

    // 关闭弹层
    handleClose() {
      this.$emit('handleCancel')
    },

    // 点击确定
    handleSure() {
      const self = this;
      let {updataType} = self.info;
      if (!!(self.tempContent)) {
        let params = Object();
        Reflect.set(params, 'key', updataType);
        Reflect.set(params, 'val', (self.tempContent));
        self.$emit('handleSure', params);
        self.handleClose();
      } else {
        self.$message({
          message: '请先输入内容',
          type: "warning"
        })
      }

    },
  },

  watch: {
    // 写入文本域内容
    info: {
      handler: async function (val) {
        if (!!val && !(this.$lodash.isEmpty(val))) {
          this.content = val.content;
          this.tempContent = val.content;
        }
      },
      deep: true,
      immediate: true,
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/assets/style/layer";
@import "assets/style";
</style>